<template>
  <el-tabs type="border-card">
    <el-tab-pane label="普通配置">
      <el-form ref="normalForm" :model="normalForm" :rules="normalFormRules" label-width="250px" class="normal-form">
        <el-form-item label="网站名称" prop="siteName">
          <el-input v-model="normalForm.siteName" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="网站描述" prop="siteDescription">
          <el-input v-model="normalForm.siteDesciption" type="textarea" :rows="2" maxlength="255" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="网站访问域名">
          <el-input v-model="normalForm.siteHost" style="width: 30%;" />
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="站点访问域名如:http://www.myhost.com">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>
        <el-form-item label="邀请注册域名">
          <el-input v-model="normalForm.inviteHost" style="width: 30%;" />
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="如:http://www.wbtask.com">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>
        <el-form-item label="网站状态" prop="siteStatus">
          <el-radio-group v-model="normalForm.siteStatus">
            <el-radio :label="1">开启站点</el-radio>
            <el-radio :label="0">关闭站点
              <el-popover placement="right" title="提示" width="300" trigger="hover" content="关闭站点后, 前台将不能访问.">
                <i slot="reference" class="el-icon-question" style="color: orange;" />
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="列表默认数量" prop="defaultPageSize">
          <el-input-number v-model="normalForm.defaultPageSize" type="number" :step="1" :min="1" :max="50" style="width: 20%;" />
          <span>列表数据每页默认数量</span>
        </el-form-item>

        <el-form-item v-if="normalForm.siteStatus == 0" label="网站关闭原因" prop="siteCloseReason">
          <el-input v-model="normalForm.siteCloseReason" type="textarea" :rows="2" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="关于我们" prop="aboutUs">
          <el-input v-model="normalForm.articles.aboutUs" type="number" style="width: 20%;" />
          <span>对应的帮助中心文章ID</span>
        </el-form-item>
        <el-form-item label="用户协议" prop="userServiceAgreement">
          <el-input v-model="normalForm.articles.userServiceAgreement" type="number" style="width: 20%;" />
          <span>对应的帮助中心文章ID</span>
        </el-form-item>
        <el-form-item label="隐私政策" prop="privacyPolicy">
          <el-input v-model="normalForm.articles.privacyPolicy" type="number" style="width: 20%;" />
          <span>对应的帮助中心文章ID</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(normalForm)">保存</el-button>
        </el-form-item>

      </el-form>
    </el-tab-pane>

    <el-tab-pane label="短信/验证码">
      <el-form ref="smsForm" :model="smsForm" :rules="smsFormRules" label-width="250px" class="normal-form">
        <el-form-item label="短信平台" prop="smsHandler">
          <el-radio-group v-model="smsForm.smsHandler">
            <el-radio label="aliyunSms">阿里云
              <el-popover placement="right" title="提示" width="300" trigger="hover" content="详情请参考阿里云官方文档: https://help.aliyun.com/document_detail/55288.html?spm=a2c4g.11186623.6.557.75db1a81boT5LJ">
                <i slot="reference" class="el-icon-question" style="color: orange;" />
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="smsForm.smsHandler == 'aliyunSms'">
          <el-form-item label="阿里云短信key">
            <el-input v-model="smsForm.aliyunSms.key" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="阿里云短信服务创建的AccessKey ID">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="阿里云短信Secret">
            <el-input v-model="smsForm.aliyunSms.secret" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="阿里云短信服务创建的AccessKey Secret">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
        </div>

        <el-form-item label="短信验证码长度" prop="smsCaptchaLength">
          <el-input-number v-model.number="smsForm.smsCaptchaLength" :step="1" :min="4" :max="8" />
        </el-form-item>
        <el-form-item label="短信验证码有效时长" prop="smsCaptchaDuration">
          <el-input-number v-model.number="smsForm.smsCaptchaDuration" :step="60" :min="60" :max="3600" />
        </el-form-item>

        <el-form-item label="注册账号验证短信验证码" prop="userRegisterOnValidateCaptcha">
          <el-radio-group v-model="smsForm.userRegisterOnValidateCaptcha">
            <el-radio :label="true">开启</el-radio>
            <el-radio :label="false">关闭
              <el-popover placement="right" title="提示" width="300" trigger="hover" content="用户注册是否开启短信验证码验证">
                <i slot="reference" class="el-icon-question" style="color: orange;" />
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="图形验证码生成库" prop="imageLibrary">
          <el-radio-group v-model="smsForm.imgCaptcha.imageLibrary">
            <el-radio label="imagick">ImageMagick</el-radio>
            <el-radio label="gd">GD</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="图形验证码图片宽度" prop="width">
          <el-input-number v-model.number="smsForm.imgCaptcha.width" :step="10" :min="80" :max="200" />
        </el-form-item>
        <el-form-item label="图形验证码长度" prop="imgCaptchaLength">
          <el-input-number v-model.number="smsForm.imgCaptchaLength" :step="1" :min="4" :max="8" />
        </el-form-item>

        <el-form-item label="图形验证码字符间隔" prop="offset">
          <el-input-number v-model.number="smsForm.imgCaptcha.offset" :step="1" :min="-10" :max="32" />
        </el-form-item>
        <el-form-item label="图形验证码字符内边距" prop="padding">
          <el-input-number v-model.number="smsForm.imgCaptcha.padding" :step="1" :min="-50" :max="100" />
        </el-form-item>
        <el-form-item label="图形验证码字体最小" prop="minFontSize">
          <el-input-number v-model.number="smsForm.imgCaptcha.minFontSize" :step="1" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="图形验证码字体最大" prop="maxFontSize">
          <el-input-number v-model.number="smsForm.imgCaptcha.maxFontSize" :step="1" :min="1" :max="100" />
        </el-form-item>
        <el-form-item label="图形验证码颜色" prop="foreColor">
          <el-input v-model="smsForm.imgCaptcha.foreColor" style="width: 150px;" type="text" />
          <span :style="getImgCaptchaColor(smsForm.imgCaptcha.foreColor)">图形验证码</span>
          <span>颜色16进制值如：白色FFFFFF, 自动auto</span>
        </el-form-item>

        <el-form-item label="图形证码有效时长(秒)" prop="cacheDuration">
          <el-input-number v-model.number="smsForm.imgCaptcha.cacheDuration" :step="60" :min="60" :max="3600" />
        </el-form-item>

        <el-form-item label="图形验证码干扰线" prop="isWriteCurve">
          <el-radio-group v-model="smsForm.imgCaptcha.isWriteCurve">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图形验证码干扰字符" prop="isWriteNoise">
          <el-radio-group v-model="smsForm.imgCaptcha.isWriteNoise">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="smsForm.imgCaptcha.isWriteNoise==1" label="干扰字符数" prop="disturbCharCount">
          <el-input-number v-model.number="smsForm.imgCaptcha.disturbCharCount" :step="1" :min="0" :max="32" />
        </el-form-item>

        <el-form-item v-if="smsForm.imgCaptcha.isWriteNoise==1" label="干扰字符字体最小" prop="noiseMinFontSize">
          <el-input-number v-model.number="smsForm.imgCaptcha.noiseMinFontSize" :step="1" :min="1" :max="100" />
        </el-form-item>
        <el-form-item v-if="smsForm.imgCaptcha.isWriteNoise==1" label="干扰字符字体最大" prop="noiseMaxFontSize">
          <el-input-number v-model.number="smsForm.imgCaptcha.noiseMaxFontSize" :step="1" :min="1" :max="100" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(smsForm)">保存</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="上传配置">
      <el-form ref="uploadForm" :model="uploadForm" :rules="uploadFormRules" label-width="180px" class="normal-form">

        <el-form-item label="OSS服务商" prop="ossHandler">
          <el-radio-group v-model="uploadForm.ossHandler">
            <el-radio label="localOss">本地
              <el-popover placement="right" title="提示" width="300" trigger="hover" content="上传文件将保存在本地服务器">
                <i slot="reference" class="el-icon-question" style="color: orange;" />
              </el-popover>
            </el-radio>
            <el-radio label="aliyunOss">阿里云
              <el-popover placement="right" title="提示" width="300" trigger="hover" content="详情请参考阿里云官方文档: https://help.aliyun.com/document_detail/31817.html?spm=a2c4g.11186623.6.568.4ab16b46VLhmV1">
                <i slot="reference" class="el-icon-question" style="color: orange;" />
              </el-popover>
            </el-radio>
            <el-radio label="qcloudOss">腾讯云
              <el-popover placement="right" title="提示" width="300" trigger="hover" content="详情请参考腾讯云官方文档: https://cloud.tencent.com/document/product/436/6222">
                <i slot="reference" class="el-icon-question" style="color: orange;" />
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <div v-if="uploadForm.ossHandler == 'localOss'">
          <el-form-item label="本地OSS访问域名">
            <el-input v-model="uploadForm.localOss.host" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="本地文件服务器访问的域名, 请配置域名指向本地根目录下的upload目录, 如: http://myhost.com 绑定到根目录upload, 访问http://myhost.com即访问upload目录.">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
        </div>

        <div v-if="uploadForm.ossHandler == 'aliyunOss'">
          <el-form-item label="阿里云ID">
            <el-input v-model="uploadForm.aliyunOss.secretId" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="350" trigger="hover" content="阿里云OSS服务创建的AccessKey ID">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="阿里云Secret">
            <el-input v-model="uploadForm.aliyunOss.secretKey" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="350" trigger="hover" content="阿里云OSS服务创建的AccessKey Secret">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="阿里云储存域">
            <el-input v-model="uploadForm.aliyunOss.endpoint" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="阿里云OSS储存域(Endpoint), 同地域ECS请配置内网地址, 以杭州为例: http://oss-cn-hangzhou.aliyuncs.com">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="阿里云Bucket名称">
            <el-input v-model="uploadForm.aliyunOss.bucket" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="阿里云OSS储存设置的Bucket存储空间名称">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="阿里云自定义域名">
            <el-input v-model="uploadForm.aliyunOss.selfHost" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="阿里云OSS可以自定义访问域名, 如: http://myhost.com">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
        </div>
        <div v-if="uploadForm.ossHandler == 'qcloudOss'">
          <el-form-item label="腾讯云ID">
            <el-input v-model="uploadForm.qcloudOss.secretId" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="腾讯云OSS服务创建的API密钥SecretId">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="腾讯云Secret">
            <el-input v-model="uploadForm.qcloudOss.secretKey" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="腾讯云OSS服务创建的API密钥SecretKey">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="腾讯云储存域">
            <el-input v-model="uploadForm.qcloudOss.region" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="腾讯云OSS储存域(Region), 同地域ECS请配置内网地址">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="腾讯云Bucket名称">
            <el-input v-model="uploadForm.qcloudOss.bucket" style="width: 30%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="腾讯云OSS储存设置的Bucket存储空间名称">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
        </div>

        <el-form-item label="允许上传的文件大小" prop="uploadFileMaxSize">
          <el-input-number v-model.number="uploadForm.uploadFileMaxSize" :step="1" :min="0" />
          <span> MB</span>
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="最大值请参考php.ini配置文件中upload_max_filesize 和 post_max_size参数">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>

        <el-form-item label="允许上传的文件类型" prop="uploadFileExt">
          <el-select
            v-model="uploadForm.uploadFileExt"
            filterable
            allow-create
            default-first-option
            multiple
            placeholder="请选择"
            style="width: 50%;"
          >
            <el-option
              v-for="item in uploadFileExtOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="允许上传的图片大小" prop="uploadImageMaxSize">
          <el-input-number v-model.number="uploadForm.uploadImageMaxSize" :step="1" :min="0" />
          <span> MB</span>
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="最大值请参考php.ini配置文件中upload_max_filesize 和 post_max_size参数">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>

        <el-form-item label="允许上传的图片类型" prop="uploadImageExt">
          <el-select
            v-model="uploadForm.uploadImageExt"
            filterable
            allow-create
            default-first-option
            multiple
            placeholder="请选择"
            style="width: 50%;"
          >
            <el-option
              v-for="item in uploadImageExtOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="允许上传的视频大小" prop="uploadVideoMaxSize">
          <el-input-number v-model.number="uploadForm.uploadVideoMaxSize" :step="1" :min="0" />
          <span> MB</span>
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="最大值请参考php.ini配置文件中upload_max_filesize 和 post_max_size参数">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>

        <el-form-item label="允许上传的视频类型" prop="uploadVideoExt">
          <el-select
            v-model="uploadForm.uploadVideoExt"
            filterable
            allow-create
            default-first-option
            multiple
            placeholder="请选择"
            style="width: 50%;"
          >
            <el-option
              v-for="item in uploadVideoExtOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="允许上传的音频大小" prop="uploadAudioMaxSize">
          <el-input-number v-model.number="uploadForm.uploadAudioMaxSize" :step="1" :min="0" />
          <span> MB</span>
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="最大值请参考php.ini配置文件中upload_max_filesize 和 post_max_size参数">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>

        <el-form-item label="允许上传的音频类型" prop="uploadAudioExt">
          <el-select
            v-model="uploadForm.uploadAudioExt"
            filterable
            allow-create
            default-first-option
            multiple
            placeholder="请选择"
            style="width: 50%;"
          >
            <el-option
              v-for="item in uploadAudioExtOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(uploadForm)">保存</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="第三方受权配置">
      <el-form ref="oauthForm" :model="oauthForm" :rules="oauthFormRules" label-width="150px" class="normal-form">
        <el-form-item label="支付宝">
          <el-radio-group v-model="oauthForm.alipayOauth.use">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付宝appId">
          <el-input v-model="oauthForm.alipayOauth.appId" style="width: 30%;" />
        </el-form-item>
        <el-form-item label="支付宝商户号">
          <el-input v-model="oauthForm.alipayOauth.pid" style="width: 30%;" />
          <span>以 2088 开头的 16 位纯数字组成,示例：2088123456789012</span>
        </el-form-item>
        <el-form-item label="支付宝应用私钥">
          <el-input v-model="oauthForm.alipayOauth.merchantPrivateKey" style="width: 40%;" />
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="支付宝应用私钥">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>
        <el-form-item label="支付宝公钥">
          <el-input v-model="oauthForm.alipayOauth.alipayPublicKey" style="width: 40%;" />
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="支付宝公钥">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>
        <el-form-item label="回调地址">
          <el-input v-model="oauthForm.alipayOauth.redirectUri" style="width: 50%;" />
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="网页授权回调地址">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>
        <el-form-item label="支付宝AES密钥">
          <el-input v-model="oauthForm.alipayOauth.encryptKey" style="width: 50%;" />
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="调用AES加解密相关接口时需要（可选）">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>
        <el-form-item label="微信">
          <el-radio-group v-model="oauthForm.weixinOauth.use">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微信appId">
          <el-input v-model="oauthForm.weixinOauth.appId" style="width: 30%;" />
        </el-form-item>
        <el-form-item label="微信应用私钥">
          <el-input v-model="oauthForm.weixinOauth.secret" style="width: 40%;" />
          <el-popover placement="right" title="提示" width="300" trigger="hover" content="微信应用私钥">
            <i slot="reference" class="el-icon-question" style="color: orange;" />
          </el-popover>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(oauthForm)">保存</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>

    <el-tab-pane label="APP配置">
      <el-form ref="appForm" :model="appForm" :rules="appFormRules" label-width="250px" class="normal-form">
        <el-form-item label="当前APP版本号">
          <el-input v-model="appForm.appVersion" style="width: 30%;" />
          <span>APP版本号：1.0.0</span>
        </el-form-item>
        <el-form-item label="当前APP版本号值">
          <el-input v-model="appForm.appVersionNum" style="width: 30%;" />
          <span>APP版本号对应的值：100</span>
        </el-form-item>
        <el-form-item label="当前APP资源包版本号值">
          <el-input v-model="appForm.appResVersionNum" style="width: 30%;" />
          <span>APP资源版本号对应的值：100</span>
        </el-form-item>

        <el-form-item label="安卓整包更新链接">
          <el-input v-model="appForm.appAndroidUpLink" style="width: 50%;" />
        </el-form-item>
        <el-form-item label="iOS整包更新链接">
          <el-input v-model="appForm.appiOSUpLink" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="安卓资源包更新链接">
          <el-input v-model="appForm.appAndroidResUpLink" style="width: 50%;" />
        </el-form-item>
        <el-form-item label="iOS资源包更新链接">
          <el-input v-model="appForm.appiOSResUpLink" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="APP应用商店下载链接">
          <el-input v-model="appForm.appStoreDownLink" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="安卓版本更新说明" prop="appUpInfo">
          <el-input v-model="appForm.appAndroidUpInfo" type="textarea" :rows="3" maxlength="512" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="iOS版本更新说明" prop="appUpInfo">
          <el-input v-model="appForm.appiOSUpInfo" type="textarea" :rows="3" maxlength="512" style="width: 50%;" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(appForm)">保存</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { fetchUpdateConfig, fetchGetConfig } from '@/api/config.js'
export default {
  data() {
    return {
      normalForm: {
        siteName: '',
        siteHost: '',
        inviteHost: '',
        siteDesciption: '',
        siteStatus: 1,
        siteCloseReason: '',
        defaultPageSize: 10,
        rewardedVideoAdNum: 10,
        articles: {
          aboutUs: 0,
          userServiceAgreement: 0,
          privacyPolicy: 0
        }
      },
      smsForm: {
        smsHandler: 'aliyunSms',
        aliyunSms: {
          key: '',
          secret: ''
        },
        userRegisterOnValidateCaptcha: true,
        imgCaptchaColor: '',
        imgCaptchaLength: 6,
        smsCaptchaLength: 6,
        smsCaptchaDuration: 600,
        imgCaptcha: {
          width: 120,
          offset: -2,
          padding: 2,
          foreColor: 'auto',
          imageLibrary: 'imagick',
          isWriteNoise: 1,
          isWriteCurve: 1,
          cacheDuration: 600,
          minFontSize: 30,
          maxFontSize: 32,
          noiseMinFontSize: 20,
          noiseMaxFontSize: 30,
          disturbCharCount: 8
        }
      },
      uploadForm: {
        ossHandler: 'localOss',
        localOss: {
          host: ''
        },
        aliyunOss: {
          secretId: '',
          secretKey: '',
          endpoint: '',
          bucket: '',
          selfHost: ''
        },
        qcloudOss: {
          secretId: '',
          secretKey: '',
          region: '',
          bucket: ''
        },
        uploadFileMaxSize: 10,
        uploadFileExt: [],
        uploadImageMaxSize: 2,
        uploadImageExt: [],
        uploadVideoMaxSize: 10,
        uploadVideoExt: [],
        uploadAudioMaxSize: 2,
        uploadAudioExt: []
      },
      oauthForm: {
        alipayOauth: {
          use: 1,
          appId: '',
          pid: '',
          merchantPrivateKey: '',
          alipayPublicKey: '',
          redirectUri: '',
          encryptKey: ''
        },
        weixinOauth: {
          use: 1,
          appId: '',
          secret: ''
        }
      },
      appForm: {
        appVersion: '1.0.0',
        appVersionNum: '100',
        appResVersionNum: '100',
        appAndroidUpLink: '',
        appAndroidResUpLink: '',
        appiOSUpLink: '',
        appiOSResUpLink: '',
        appStoreDownLink: '',
        appAndroidUpInfo: '',
        appiOSUpInfo: ''
      },
      uploadFileExtOptions: [
        { value: 'jpg' },
        { value: 'png' },
        { value: 'gif' },
        { value: 'jpeg' },
        { value: 'webp' },
        { value: 'mp4' },
        { value: 'mov' },
        { value: 'webm' },
        { value: 'wma' },
        { value: 'mp3' },
        { value: 'zip' },
        { value: 'apk' },
        { value: 'rar' }
      ],
      uploadImageExtOptions: [
        { value: 'jpg' },
        { value: 'png' },
        { value: 'gif' },
        { value: 'jpeg' },
        { value: 'webp' }
      ],
      uploadVideoExtOptions: [
        { value: 'mp4' },
        { value: 'mov' },
        { value: 'webm' }
      ],
      uploadAudioExtOptions: [
        { value: 'wma' },
        { value: 'mp3' }
      ],
      normalFormRules: {
        siteName: [{
          min: 0,
          max: 128,
          message: '长度在 2 到 128 个字符',
          trigger: 'blur'
        }],
        siteDesciption: [{
          min: 0,
          max: 128,
          message: '长度在 0 到 128 个字符',
          trigger: 'blur'
        }],
        siteCloseReason: [{
          min: 0,
          max: 128,
          message: '长度在 0 到 128 个字符',
          trigger: 'blur'
        }]
      },
      smsFormRules: {
        smsCaptchaLength: [
          { type: 'number', message: '短信验证码长度必须为数字值' },
          { min: 4, max: 8, message: '长度4 到 8', trigger: 'blur' }
        ],
        smsCaptchaDuration: [
          { type: 'number', message: '短信验证码有效时长必须为数字值' },
          { min: 60, max: 3600, message: '有效时长60-3600秒', trigger: 'blur' }
        ]
      },
      uploadFormRules: {
      },
      oauthFormRules: {},
      appFormRules: {}
    }
  },
  beforeMount() {
    this.getConfig()
  },
  methods: {
    getImgCaptchaColor(color) {
      if (color === 'auto' || color === 'fff' || color === 'ffffff') return ''
      if (color) {
        return 'color: #' + color + ' !important;'
      }
    },
    async getConfig() {
      const that = this
      const loading = this.ceateLoading()
      await fetchGetConfig('site').then((res) => {
        // 初始化数据
        const config = res.data
        that.setConfigValue(that.smsForm, config)
        that.setConfigValue(that.normalForm, config)
        that.setConfigValue(that.uploadForm, config)
        that.setConfigValue(that.oauthForm, config)
        that.setConfigValue(that.appForm, config)
      })
      loading.close()
    },
    // 配置数据
    setConfigValue(form, config) {
      const keys = Object.keys(form)
      for (const i in keys) {
        if (typeof form[keys[i]] === 'object' && form[keys[i]] && !Array.isArray(form[keys[i]])) {
          if (config[keys[i]] !== undefined) {
            this.setConfigValue(form[keys[i]], config[keys[i]])
          }
        } else {
          form[keys[i]] = config[keys[i]] || form[keys[i]]
        }
      }
    },
    // 保存
    submitForm(data) {
      const that = this
      const loading = this.ceateLoading()

      fetchUpdateConfig(data, 'site').then(function(res) {
        that.$message({
          message: '更新成功',
          type: 'success',
          showClose: true,
          duration: 3000
        })
        loading.close()
      }, () => {
        loading.close()
      })
    },
    ceateLoading() {
      return this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
}
</script>

<style>
</style>
